<template>
  <div class="main">
    <div class="serbox">
      <div class="inp">
        <!-- <el-input placeholder="请输入搜索内容"
                  suffix-icon="el-icon-search"
                  v-model="searchText">
        </el-input> -->
      </div>
      <div class="btns">
        <el-button type="primary"
                   @click="openform(1)">添加角色</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData"
                stripe
                style="width: 100%">
        <el-table-column type="index"
                         label="序号">
        </el-table-column>
        <el-table-column prop="nickName"
                         label="姓名">
        </el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            <span v-if="scope.row.sex=='0'">男</span>
            <span v-if="scope.row.sex=='1'">女</span>
          </template>
        </el-table-column>
        <el-table-column prop="phonenumber"
                         label="手机号">
        </el-table-column>
        <el-table-column prop="userName"
                         label="账号">
        </el-table-column>
        <el-table-column prop="email"
                         label="邮箱">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status=='0'">正常</span>
            <span v-if="scope.row.status=='1'">停用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="delUser(scope.row.userId)"
                       type="text"
                       style="color:red"
                       size="small">删除</el-button>
            <el-button @click="openform(scope.row)"
                       type="text"
                       size="small">修改</el-button>
            <el-button @click="rsetpas(scope.row.userId)"
                       type="text"
                       size="small">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <div class="btns">
        <!-- <el-button type="primary">批量删除</el-button> -->
      </div>
      <el-pagination background
                     @current-change="changePage"
                     :current-page.sync="page"
                     :page-size="pageSize"
                     layout="total,prev,pager,next,jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="店员管理"
               :visible.sync="pop"
               width="45%">
      <el-form label-width="80px"
               :model="popform">
        <el-form-item label="账号"
                      required>
          <el-input v-model="popform.userName"
                    placeholder="请输入账号"
                    :disabled="!isAdd"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      required
                      v-if="isAdd">
          <el-input v-model="popform.password"
                    type="password"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="姓名"
                      required>
          <el-input v-model="popform.nickName"
                    placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="手机号"
                      required>
          <el-input v-model="popform.phonenumber"
                    placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="popform.email"
                    placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="popform.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色"
                      required>
          <el-radio-group v-model="popform.roleId">
            <el-radio :label="item.roleId"
                      v-for="item in rolelist"
                      :key="item.roleId">{{item.roleName}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submit(popform)">确 定</el-button>
          <el-button @click="pop=false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog title="重置密码"
               :visible.sync="paspop"
               width="30%">
      <el-form label-width="80px">
        <el-form-item label="新密码"
                      required>
          <el-input v-model="newPasw"
                    type="password"
                    placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submitpas">确 定</el-button>
          <el-button @click="paspop=false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchText: "",
      tableData: [], // 表单
      page: 1,
      pageSize: 10,
      total: 0,
      pop: false,
      popform: {
        userName: "",
        password: "",
        nickName: "",
        email: "",
        phonenumber: "",
        sex: "0",
        roleId: ""
      },
      rolelist: [], // 角色列表
      isAdd: true,
      suserId: "", // 修改的用户id
      paspop: false,
      newPasw: ""
    }
  },
  mounted () {
    this.getlist();
    this.getrolelist();
  },
  methods: {
    // 获取店员列表
    getlist () {
      this.$postRequest("/shopuser/user/list", {
        pageNum: this.page,
        pageSize: this.pageSize,
        shopId: sessionStorage.getItem("shopId")
      }).then(res => {
        this.total = res.total;
        this.tableData = res.rows;
      })
    },
    // 获取角色列表
    getrolelist () {
      this.$postRequest("/shopuser/role/list", {
        pageNum: 1,
        pageSize: 999,
        shopId: sessionStorage.getItem("shopId")
      }).then(res => {
        this.rolelist = res.rows;
      })
    },
    // 打开表单弹框
    openform (e) {
      this.pop = true;
      if (e == 1) {
        this.rsetForm();
        this.isAdd = true;
      } else {
        this.isAdd = false;
        this.getUserInfo(e.userId);
        this.suserId = e.userId;
      }
    },
    // 获取店员详细信息
    getUserInfo (id) {
      this.$getRequest("/shopuser/user/" + id, {}).then(res => {
        this.popform = {
          userName: res.data.userName,
          password: "0",
          nickName: res.data.nickName,
          email: res.data.email,
          phonenumber: res.data.phonenumber,
          sex: res.data.sex,
          roleId: res.data.role.roleId
        }
      })
    },
    // 确定
    submit (e) {
      var tellreg = /^1[0-9]{10}$/;
      if (e.userName == "" || e.password == "" || e.nickName == "" || e.phonenumber == "" || e.roleId == "") {
        this.$message.error("必填项不允许有空，请补充完整")
      } else if (!tellreg.test(e.phonenumber)) {
        this.$message.error("手机号错误");
      } else {
        if (this.isAdd) {
          this.$postRequest("/shopuser/user/repeat", {
            userName: e.userName
          }).then(res => {
            if (res.code == 200) {
              this.addUser();
            }
          })
        } else {
          this.editUser();
        }

      }
    },
    addUser () {
      this.$postRequest("/shopuser/user/add", {
        shopId: sessionStorage.getItem("shopId"),
        userName: this.popform.userName,
        password: this.popform.password,
        nickName: this.popform.nickName,
        email: this.popform.email,
        phonenumber: this.popform.phonenumber,
        sex: this.popform.sex,
        roleId: this.popform.roleId
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.getlist();
          this.pop = false;
        }
      })
    },
    editUser () {
      this.$postRequest("/shopuser/user/edit", {
        suserId: this.suserId,
        shopId: sessionStorage.getItem("shopId"),
        nickName: this.popform.nickName,
        email: this.popform.email,
        phonenumber: this.popform.phonenumber,
        sex: this.popform.sex,
        roleId: this.popform.roleId
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getlist();
          this.pop = false;
        }
      })
    },
    // 清空表单
    rsetForm () {
      this.popform = {
        userName: "",
        password: "",
        nickName: "",
        email: "",
        phonenumber: "",
        sex: "0",
        roleId: ""
      }
    },
    // 修改密码提交
    submitpas () {
      if (this.newPasw == "") {
        this.$message.error("请输入新密码")
      } else {
        this.$postRequest("/shopuser/user/reset", {
          shopId: sessionStorage.getItem("shopId"),
          suserId: this.suserId,
          password: this.newPasw
        }).then(res => {
          if (res.code == 200) {
            this.$message.success("重置成功");
            this.paspop = false;
            this.newPasw = "";
          }
        })
      }
    },
    // 重置密码
    rsetpas (id) {
      this.suserId = id;
      this.paspop = true;
    },
    // 分页
    changePage () {
      this.getlist();
    },
    // 删除用户
    delUser (id) {
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postRequest("/shopuser/user/remove", {
          shopId: sessionStorage.getItem("shopId"),
          suserId: id
        }).then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getlist();
          }
        })
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    }
  }

}
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary,
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner,
/deep/ .el-radio__input.is-checked .el-radio__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-radio__input.is-checked + .el-radio__label,
/deep/ .el-button--text {
  color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #333;
}
/deep/ .el-textarea__inner {
  min-height: 60px !important;
}
.main {
  margin: 20px;
  background: #fff;
}
.serbox {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  .inp {
    width: 200px;
    margin-left: 20px;
  }
}
.table {
  margin: 20px;
  border: 1px solid #eee;
  .img {
    height: 50px;
    width: 50px;
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.popimg {
  height: 120px;
  width: 120px;
}
</style>